<template>
    <div class="my-input">
        <span>ToDoList</span>
        <input type="text" v-model="content" @keydown.enter="addTask" placeholder="按enter键可提交">
    </div>
</template>
<script setup>
    import { useStore } from "vuex";
    import { ref } from "vue";
    let store = useStore();
    let content = ref('');
    function addTask() {
        if(!content.value) return;
        store.commit("addTask", content.value);
        content.value = '';
    }
</script>

<style lang="scss" scoped>
    .my-input {
        width: 100%;
        background: #000;
        color: #fff;
        display: flex;
        height: 50px;
        justify-content: space-around;
        align-items: center;
        span {
            font-size: 26px;
            font-weight: bold;
            flex-basis: 20%;
        }
        input {
            border: none;
            outline: none;
            background-color: #fff;
            flex-basis: 60%;
            height: 30px;
            border-radius: 6px;
            padding-left: 15px;
        }
    }
</style>